<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <el-divider>企业组织架构</el-divider>
        <div style="padding:0 150px;">
          <!-- 头部 -->
          <div style="width:100%; display:flex;justify-content: space-between">
            <el-tag type="success"><i class="el-icon-collection-tag" /> 腾讯总部 </el-tag>
            <div>
              <el-tag type="success" style="margin:0 150px;">负责人</el-tag>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-tag type="danger" style="margin-right:30px;">操作<i class="el-icon-arrow-down el-icon--right" /></el-tag>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="addHandler">添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <hr>
          <!-- 树形 -->
          <el-tree
            :data="data"
            :props="defaultProps"
            accordion
          >
            <template slot-scope="scope">
              <div style="width:100%; display:flex;justify-content: space-between" class="tree-row" @click="onNodeClick(scope.data)">
                <el-tag>{{ scope.data.name }}</el-tag>
                <div>
                  <el-tag type="success" style="margin:0 150px;">{{ scope.data.manager || "--" }}</el-tag>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <el-tag type="danger" style="margin-right:30px;">操作<i class="el-icon-arrow-down el-icon--right" /></el-tag>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>添加子部门</el-dropdown-item>
                      <el-dropdown-item>编辑部门</el-dropdown-item>
                      <el-dropdown-item>删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <el-drawer
      title="添加子部门"
      :visible.sync="showDrawer"
      direction="rtl"
      size="40%"
    >
      <depDrawer />
    </el-drawer>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { transArray } from '@/utils'
import depDrawer from './depDrawer.vue'

export default {
  name: '',
  components: {
    depDrawer
  },
  data() {
    return {
      companyName: '',
      showDrawer: false,
      data: [],
      defaultProps: {
        children: 'children'
      }
    }
  },
  computed: {},
  created() {
    this.getDepartmentsList()
  },
  methods: {
    onNodeClick(row) {
      console.log(row)
    },
    async getDepartmentsList() {
      const res = await getDepartments()
      // console.log(res)
      if (res.code !== 10000) return
      this.companyName = res.data.companyName
      console.log(res.data)
      this.data = transArray(res.data.depts)
      console.log(this.data)
    },
    addHandler() {
      this.showDrawer = true
    }
  }
}
</script>
<style lang='scss'  scoped>
::v-deep .el-tree-node {
  margin: 15px 0;
}
</style>
